<template>
  <div>
    <div class="create-title">
      <div class="create-title-flex">
        <p>创建监测</p>
        <span @click="$router.goBack()">返回</span>
      </div>
    </div>
    <div class="add-info">
      <div class="info-title">
        <p class="bold">{{ typeParam.name }}</p>
        <div :class="[typeParam.sClass]"></div>
      </div>
      <div class="info-input">
        <p class="bold">请输入你想关注的{{ typeParam.name }}：</p>
        <input type="text" placeholder="添加一个关键词" v-model="key">
        <p class="bold">为关键词添加限定词(选填)：</p>
        <input type="text" placeholder="添加多个限定词可用空格隔开">
        <div class="info-button" style="background-color: #c1c1c1" @click="$router.goBack()">
          <span>上一步</span>
        </div>
        <div class="info-button" style="background-color: #3f7bff" @click="nextToList">
          <span>下一步</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import {mapState} from 'vuex'

  export default {
    name: "addMonitor",
    data(){
      return{
        key:''
      }
    },
    computed: {
      ...mapState(['typeParam'])
    },
    methods:{
      nextToList(){
        if(this.key == ''){
          this.$toast({
            message:'请输入关键词',
            className:'new-toast'
          });
          return false
        }
        this.$router.push('/monitorList')
      }
    }
  }
</script>

<style scoped lang="less">
  @import "../../style/mixin";

  .create-title {
    position: fixed;
    top: 0;
    margin: auto;
    width: 750px;
    height: 88px;
    background-color: #05469b;
    .create-title-flex {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: #fff;
      p {
        margin-left: 15px;
        padding: 10px 52px;
        font-size: 34px; /*px*/
        background: url("../../assets/monitor/monitor_icon@2x.png") no-repeat left center;
        background-size: 52px 54px;
      }
      span {
        padding-right: 32px;
        font-size: 30px; /*px*/
      }
    }
  }

  [data-dpr='3'] .create-title .create-title-flex p {
    background: url("../../assets/monitor/monitor_icon@3x.png") no-repeat left center;
    background-size: 52px 54px;
  }

  .add-info{
    margin-top: 176px;
    .info-title{
      width: 690px;
      height: 98px;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-top-left-radius: 8px;
      border-top-right-radius: 8px;
      background-color: #0f62c0;
      p{
        font-size: 36px;/*px*/
        color: #fff;
        padding-left: 26px;
      }
      div{
        width: 68px;
        height: 62px;
        margin-right: 26px;
      }
      .t-company {
        background: url("../../assets/monitor/monitor_add_company@2x.png") no-repeat center;
        background-size: 68px 62px;
      }
      .t-brand {
        background: url("../../assets/monitor/monitor_add_brand@2x.png") no-repeat center;
        background-size: 68px 62px;
      }
      .t-person {
        background: url("../../assets/monitor/monitor_add_person@2x.png") no-repeat center;
        background-size: 68px 62px;
      }
      .t-event {
        background: url("../../assets/monitor/monitor_add_event@2x.png") no-repeat center;
        background-size: 68px 62px;
      }
      .t-unit {
        background: url("../../assets/monitor/monitor_add_unit@2x.png") no-repeat center;
        background-size: 68px 62px;
      }
      .t-hospital {
        background: url("../../assets/monitor/monitor_add_hospital@2x.png") no-repeat center;
        background-size: 68px 62px;
      }
      .t-school {
        background: url("../../assets/monitor/monitor_add_school@2x.png") no-repeat center;
        background-size: 68px 62px;
      }
      .t-stock {
        background: url("../../assets/monitor/monitor_add_stock@2x.png") no-repeat center;
        background-size: 68px 62px;
      }
      .t-star {
        background: url("../../assets/monitor/monitor_add_star@2x.png") no-repeat center;
        background-size: 68px 62px;
      }
      .t-city {
        background: url("../../assets/monitor/monitor_add_city@2x.png") no-repeat center;
        background-size: 68px 62px;
      }
      .t-vocation {
        background: url("../../assets/monitor/monitor_add_vocation@2x.png") no-repeat center;
        background-size: 68px 62px;
      }
      .t-like {
        background: url("../../assets/monitor/monitor_add_like@2x.png") no-repeat center;
        background-size: 68px 62px;
      }
    }
    .info-input{
      margin: 0 30px;
      padding: 46px 26px;
      background-color: #fff;
      font-size: 30px;/*px*/
      border-bottom-left-radius: 8px;
      border-bottom-right-radius: 8px;
      box-shadow: 0 2px 6px rgba(8, 41, 85, 0.08);
      p{
        margin-bottom: 10px;
      }
      input{
        width: 100%;
        padding: 10px 0;
        margin-bottom: 66px;
        border-bottom: 1px solid #888;/*no*/
      }
      .info-button{
        width: 100%;
        height: 80px;
        border-radius: 8px;
        margin-bottom: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
        font-size: 32px;/*px*/
      }
    }
  }
  [data-dpr='3'] .add-info{
    .t-company {
      background: url("../../assets/monitor/monitor_add_company@3x.png") no-repeat center;
      background-size: 68px 62px;
    }
    .t-brand {
      background: url("../../assets/monitor/monitor_add_brand@3x.png") no-repeat center;
      background-size: 68px 62px;
    }
    .t-person {
      background: url("../../assets/monitor/monitor_add_person@3x.png") no-repeat center;
      background-size: 68px 62px;
    }
    .t-event {
      background: url("../../assets/monitor/monitor_add_event@3x.png") no-repeat center;
      background-size: 68px 62px;
    }
    .t-unit {
      background: url("../../assets/monitor/monitor_add_unit@3x.png") no-repeat center;
      background-size: 68px 62px;
    }
    .t-hospital {
      background: url("../../assets/monitor/monitor_add_hospital@3x.png") no-repeat center;
      background-size: 68px 62px;
    }
    .t-school {
      background: url("../../assets/monitor/monitor_add_school@3x.png") no-repeat center;
      background-size: 68px 62px;
    }
    .t-stock {
      background: url("../../assets/monitor/monitor_add_stock@3x.png") no-repeat center;
      background-size: 68px 62px;
    }
    .t-star {
      background: url("../../assets/monitor/monitor_add_star@3x.png") no-repeat center;
      background-size: 68px 62px;
    }
    .t-city {
      background: url("../../assets/monitor/monitor_add_city@3x.png") no-repeat center;
      background-size: 68px 62px;
    }
    .t-vocation {
      background: url("../../assets/monitor/monitor_add_vocation@3x.png") no-repeat center;
      background-size: 68px 62px;
    }
    .t-like {
      background: url("../../assets/monitor/monitor_add_like@3x.png") no-repeat center;
      background-size: 68px 62px;
    }
  }
</style>
